/**
 * @author wn
 * @date 2022/04/26 15:10:20
 * @description: 扩展vue原有的功能：全局组件，自定义指令，挂载原型方法
 *
 * 这就是插件
 * vue2.0插件写法要素：导出一个对象，有install函数，默认传入了Vue构造函数，Vue基础之上扩展
 * vue3.0插件写法要素：导出一个对象，有install函数，默认传入了app应用实例，app基础之上扩展
 * main.js中引入插件，use
 */

/**
 * 组件库自动导入和注册  必须是 指定目录(library)下的 .vue default 全局组件
 * - 使用 `require` 提供的函数 `context`  加载某一个目录下的所有 `.vue` 后缀的文件。
 * - 然后 `context` 函数会返回一个导入函数 `importFn`
 * - 它又一个属性 `keys() `  获取所有的文件路径
 * - 通过遍历文件路径数组，再使用 `importFn`  生成 对应的组件
 * - 遍历的同时进行全局注册即可
 *
 * require.context(目录路径, 是否加载子目录, 正则匹配文件后缀 ) CommonJS 加载模块
 * 注意：importFn 是一个函数，用于导入文件的
 */

const importFn = require.context('./', false, /\.vue$/)

export default {
	/*
      在app上进行扩展，app提供 component directive 函数
      如果要挂载原型 app.config.globalProperties 方式
			这种写法以后是提供给 main.js app.use() 安装组件库用的
    */
	install(app) {
		//  骨架屏 为全局组件
		// app.component(XtxSkeleton.name, XtxSkeleton)

		// importFn.keys() 返回值是一个数组，存放文件名路径
		importFn.keys().forEach(path => {
			// 生成组件
			const component = importFn(path).default
			// 批量注册组件
			app.component(component.name, component)
		})
	},
}
